import React from 'react';
import ListEmpty from 'atComponents/ListEmpty';
import FlowBtn from './flowBtn';
import { navigate } from 'utils/router';
import { Button } from '@teamix/ui';
import intl from '../../../../../../../locale';

export default class EmptyMrs extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      visible: false,
    };
  }

  onClick = () => {
    const { pathResource } = window.FORCE;
    navigate(`/${pathResource.fullPath}`);
  };

  showAliyun = () => {
    this.setState({
      visible: true,
    });
  };

  hideAliyun = () => {
    this.setState({
      visible: false,
    });
  };

  componentDidMount() {
    this.setBackground();
  }

  componentDidUpdate(prevProps) {
    if (this.props.isEmptyProject !== prevProps.isEmptyProject) {
      this.setBackground();
    }
  }

  componentWillUnmount() {
    this.removeBackground();
  }

  setBackground = () => {
    const dom = document.querySelector('.empty-flow');
    if (dom) {
      document.getElementById('container').classList.add('empty-flow-bg');
    } else {
      document.getElementById('container').classList.remove('empty-flow-bg');
    }
  };

  removeBackground = () => {
    document.getElementById('container').classList.remove('empty-flow-bg');
  };

  render() {
    // [<FlowBtn projectInfo={projectInfo} isInitialize />]
    const { projectInfo, isEmptyProject, startTimeInterval } = this.props;
    const { visible } = this.state;
    return isEmptyProject ? (
      <ListEmpty
        fullPage
        content=""
        desc={
          <>
            {intl.get({
              id: 'code-assets.projectPipeline.containers.empty.YunxiaoPipelineProvidesFlexibleAnd',
              defaultMessage:
                '云效流水线提供灵活易用的持续集成、持续验证、持续发布功能，助你高质量、高效率交付业务',
            })}

            <br />
            {intl.get({
              id: 'code-assets.projectPipeline.containers.empty.InitializeNowAndStartUsing',
              defaultMessage: '立即初始化开始使用吧',
            })}
          </>
        }
        btns={[
          <Button type="primary" onClick={this.onClick}>
            {intl.get({
              id: 'code-assets.projectPipeline.containers.empty.InitializeARepository',
              defaultMessage: '初始化仓库',
            })}
          </Button>,
        ]}
        image="https://img.alicdn.com/imgextra/i1/O1CN01TGfBP81aymvmXU8bK_!!6000000003399-2-tps-560-560.png"
      />
    ) : (
      <div className="empty-flow">
        <div className="empty-flow-title">
          {intl.get({
            id: 'code-assets.projectPipeline.containers.empty.CreateAPipelineToExperience',
            defaultMessage: '创建流水线，体验以下服务',
          })}
        </div>
        <FlowBtn
          className="empty-flow-btn"
          projectInfo={projectInfo}
          isInitialize
          btnText={intl.get({
            id: 'code-assets.projectPipeline.containers.empty.CreateAPipeline',
            defaultMessage: '创建流水线',
          })}
          startTimeInterval={startTimeInterval}
        />
        <img
          className="empty-flow-img"
          src="https://img.alicdn.com/imgextra/i4/O1CN0158svhH1dXiNLqzVfL_!!6000000003746-2-tps-1474-600.png"
          width="610"
        />
        <div
          className="empty-flow-bottom-line-question"
          onMouseOver={this.showAliyun}
          onMouseLeave={this.hideAliyun}
        />
        <div
          className="empty-flow-question-modal-outer"
          style={{ visibility: visible ? 'visible' : 'hidden' }}
          onMouseOver={this.showAliyun}
          onMouseLeave={this.hideAliyun}
        >
          <div className="empty-flow-question-modal">
            <div className="empty-flow-question-modal-title">
              <img
                src="https://img.alicdn.com/tfs/TB13DzOjXP7gK0jSZFjXXc5aXXa-212-48.png"
                height={16}
              />
            </div>
            <div className="empty-flow-question-modal-content">
              <span>
                {intl.get({
                  id: 'code-assets.projectPipeline.containers.empty.ReleaseAnEcsInstance',
                  defaultMessage: '云服务器（ECS）发布',
                })}
              </span>
              <span>
                {intl.get({
                  id: 'code-assets.projectPipeline.containers.empty.KubernetesPosted',
                  defaultMessage: 'Kubernetes 发布',
                })}
              </span>
              <span>
                {intl.get({
                  id: 'code-assets.projectPipeline.containers.empty.ResourcesOrchestrationServiceRosPosted',
                  defaultMessage: '资源编排服务（ROS）发布',
                })}
              </span>
              <span>
                {intl.get({
                  id: 'code-assets.projectPipeline.containers.empty.SeverlessSaeRelease',
                  defaultMessage: 'Severless（SAE）发布',
                })}
              </span>
              <span>...</span>
            </div>
            <div className="empty-flow-question-modal-more">
              {intl.get({
                id: 'code-assets.projectPipeline.containers.empty.MoreResources',
                defaultMessage: '更多资源',
              })}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
